<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Regular.js • slider</title>
  <link rel="stylesheet" href="http://foundation.zurb.com/docs/assets/css/docs.css">
  <script src="../../dist/regular.js"></script>
  <style>
    .orbit-container li{
        transition: opacity .6s;
        opacity: 0;
        margin-left: 0%;
    }
    .orbit-container .orbit-slides-container > li{
        margin-left: 0%;
    }
    .orbit-container li.active{
        margin-left: 0%;
        opacity: 1;
    }
    .orbit-container-0 ul{
      height: 158px;
    }
    .orbit-container-0 img{
      height: 158px;
    }
    .orbit-container-1 ul{
      height: 220px;
    }
  </style>
</head>
<body>

  <div class="" id="app">
  <h4>Rendered HTML</h4>
  </div>
  <script name="slider" type="template/regular" id="slider">
    <div class='tool'>
      <a class="small button warn" on-click={this.changeTheme()}>Change Item Theme</a>
    </div>
    {#list items as item}
      <a class="small button" on-click={this.nav(item_index)}>Goto Slide {@(item_index+1)}</a>
    {/list}
    <div class="orbit-container orbit-container-{themeIndex}">
      <ul class="example-orbit-content orbit-slides-container">
        {#list items as item}
          <li class={active==item_index? "active": ""}>
            {#include themes[themeIndex]}
          </li>
        {/list}
      </ul>
      <a href="#" class="orbit-prev" on-click={this.nav(active-1)}><span></span></a>
      <a href="#" class="orbit-next" on-click={this.nav(active+1)}><span></span></a>
      <div class="orbit-slide-number">
        <span>{active+1}</span> of <span>{items.length}</span>
      </div>
    </div>
  </script>


  <script>
    var Slider = Regular.extend({
      template: "#slider",
      config: function(data){
        if(!data.active) data.active = 0;
      },
      nav: function(active){
        var data = this.data;
        var len = data.items.length;
        data.active = (active + len) %  len;
      },
      changeTheme: function(){
        var data = this.data;
        var len = data.themes.length;
        data.themeIndex = (data.themeIndex + 1 + len) % len;
      }
    });


    var slider = new Slider({
      data: {
        themes: [
          '<div><h2>{item.title}</h2><h3>{item.subtitle}</h3></div>',
          '<img src="{item.url}" alt="slide {item_index}"> <div class="orbit-caption">{item.subtitle}</div>'
        ],
        themeIndex: 0,
        content: "<div><h2>{item.title}</h2><h3>{item.subtitle}</h3></div>",
        items: [
          {title: "Header1", subtitle: "subtitle1", url: "http://foundation.zurb.com/docs/assets/img/examples/satelite-orbit.jpg"},
          {title: "Header2", subtitle: "subtitle2", url: "http://foundation.zurb.com/docs/assets/img/examples/andromeda-orbit.jpg"},
          {title: "Header3", subtitle: "subtitle3", url: "http://foundation.zurb.com/docs/assets/img/examples/launch-orbit.jpg"}
        ]
      }
    }).$inject("#app")

  </script>

</body>
</html>